<template>
  <el-dialog
      title="添加用户"
      :visible.sync="addUserDialogVisible"
      width="60%">
    <!--内容主体区-->
    <el-form ref="addUserForm" :model="addUserForm" :rules="addUserFormRules" label-width="70px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="addUserForm.username" clearable></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="addUserForm.password" clearable></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="addUserForm.email" clearable></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="addUserForm.mobile" clearable></el-input>
      </el-form-item>
    </el-form>
    <!--底部区域-->
    <span slot="footer" class="dialog-footer">
          <el-button @click="addUserDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUserDialogVisible = false">确 定</el-button>
        </span>
  </el-dialog>
</template>

<script>
export default {
  name: "AddUser",
  data() {
    return {
      // 添加用户对话框是否显示
      addUserDialogVisible: true,
      // 添加用户表单
      addUserForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      // 添加用户表单验证规则对象
      addUserFormRules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 10, message: '用户名的长度在3-10个字符之间', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 19, message: '密码的长度在6-19个字符之间', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'}
        ],
        mobile: [
          {required: true, message: '请输入手机号', trigger: 'blur'}
        ]
      }
    }
  }
}
</script>

<style scoped>

</style>